<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>简单个人页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, must-revalidate">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="../js/plugins/jrender/jrender.min.js"></script>
    <style>
        .simplePerson {
            text-align: center;
            color: #7A786F;
            padding-top: 50px;
            padding-bottom: 110px;
            background-color: #E8E6E8;
        }

        .mymenu {
            margin: 15px auto;
        }

        .mymenu i {
            margin-right: 20px;
        }

    </style>


</head>
<script>
    $(function () {
        var user = JSON.parse(sessionStorage.getItem("user"));

        if (user) {
            //jrender 渲染插件 中 选择器.renderValues(json对象)
            //所以需要获取存储在sessionStorage的key的字符串json,并转为JSON对象 传进去
            $(".simplePerson").renderValues(JSON.parse(sessionStorage.getItem("user")));
            $("#logout").click(function () {
                $.ajax({
                    url: "/sessions",
                    type: 'delete',
                    success: function () {
                        sessionStorage.removeItem("user");
                        window.parent.location.href = "/index.html";
                    }
                });
            });
            $(".skip").click(function () {
                var url = $(this).data("href");
                window.parent.location.href = url;
            });
            $(".set").click(function () {
                var url = $(this).data("href");
                window.parent.location.href = url;
            });


            //===========查询系统通知=============
            $.get('/systemnotices/' + user.id + '/count', function (data) {
                console.log(data);
                if (data) {
                    $("#notice").after("<span class='badge badge-danger badge-pill'>" + data + "</span>")
                }

            })
        }else{
            location.href="/login.html";
        }
    });
</script>

<body>

<div class="simplePerson">
    <img class="rounded-circle" width="20%" render-src="headImgUrl">
    <p render-html="nickName"><strong></strong></p>
    <p render-html="email"></p>
    <hr>
    <div class="mymenu">
        <i class="fa fa-user fa-2x fa-fw"></i>
        <a class="skip" data-href="/mine/profiles.html">
            我的</a>
    </div>
    <div class="mymenu">
        <i class="fa fa-bell fa-2x fa-fw"></i>
        <a class="skip" data-href="/mine/message.html">信息</a>
    </div>
    <div class="mymenu">
        <i class="fa fa-comment fa-2x fa-fw"></i>
        <a class="skip" data-href="/mine/systemNotification.html" id="notice">通知</a>
    </div>
    <div class="mymenu">
        <i class="fa fa-cog fa-2x fa-fw"></i>
        <a class="set" data-href="/mine/info.html">设置</a>
    </div>
    <hr style="margin-top: 50px;">
    <div class="mymenu">
        <i class="fa fa-sign-out fa-2x fa-fw"></i>
        <label id="logout">退出登录</label>
    </div>
</div>

</body>

</html>